<template>
	<view>
		<view class="appointment">
			<block v-if="myCouponLists.length>0">
			<view class="appointment_item" v-for="(item,index) in myCouponLists" :key="index" :data-statuslist="item.statuslist" :data-id="item.coupon_id" @click="detail">
				<view class="appointment_title flex_layout">
					<view class="left_title">提交预约时间：{{item.createtime}}</view>
					<block v-if="item.statuslist==0">
						<view class="right_title flex_layout">
							<text class="yi"></text>
							待审核
						</view>
					</block>
					<block v-if="item.statuslist==1">
						<view class="right_title flex_layout">
							<text class="yi"></text>
							审核通过
						</view>
					</block>
					<block v-if="item.statuslist==2">
						<view class="right_title flex_layout">
							<text class="yi"></text>
							审核失败
						</view>
					</block>
				</view>
				<view class="appointment_content">
					<view class="content_title">{{item.name}}</view>
					<view class="content_message flex_layout">
						<image src="../../static/images/name.png" mode=""></image>
						<text>姓名：{{item.realname}}</text>
					</view>
					<view class="content_message">
						<image src="../../static/images/phone.png" mode=""></image>
						<text>联系：{{item.phonetext}}</text>
					</view>
					<view class="content_message">
						<image src="../../static/images/date.png" mode=""></image>
						<text>时间：{{item.appointmenttime}}</text>
					</view>
					<view class="content_message">
						<image src="../../static/images/coupon.png" mode=""></image>
						<text>编号：{{item.number}}</text>
					</view>
					<view class="edit_btn" v-if="item.statuslist==0" :data-coupon_id="item.coupon_id" :data-id="item.id" @click.stop="edit">
						<block v-if="type==1">
							<button>修改</button>
						</block>
						<block v-if="type==2">
							<button>审核</button>
						</block>
					</view>
				</view>
			</view>
			</block>
			<block v-else>
				<view class="common_block nonebg">
					<view class="appointment_item">
						<view class="noResult">暂无预约信息</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="submit_btn" @click="addyuyue">
			<button type="default">新增预约</button>
		</view> -->
	</view>
</template>

<script>
	var page=1;
	var limit=5; 
	var reachbottom=false;
	export default {
		data() {
			return {
			  myCouponLists:[],
				type:'',
				clinic_id:''
			}
		},
		onLoad(option) {
			this.type=option.type
			this.clinic_id=option.clinic_id?option.clinic_id:''
		},	
		onShow(){
				page=1;
				limit=5;
				reachbottom=false;
				this.myCouponLists=[]
				this.getMyAppointment()
		},
		// 加载更多
		onReachBottom: function() {
			if (!reachbottom) {
				this.getMyAppointment();
			}
		},
		methods: {
			detail: function(e){
				var id=e.currentTarget.dataset.id;
				var statuslist=e.currentTarget.dataset.statuslist
				if(statuslist==0||statuslist==1){
					uni.navigateTo({
						url:'detail?id='+id
					})
				}
			},
			edit: function(e){
				var id=e.currentTarget.dataset.id;
				var coupon_id=e.currentTarget.dataset.coupon_id;
				uni.navigateTo({
					url:'../user/yuyue?id='+id+'&type=2'+'&yuyueType='+this.type+'&coupon_id='+coupon_id
				})
			},
			addyuyue: function(){
				uni.navigateTo({
					url:'../user/yuyue'
				})
			},
			getMyAppointment:function(){
				var that=this;
				this.$common.loadToShow()
				
				this.$api.getMyAppointment(
				  {
					page:page,
					limit:limit,
					type:that.type,
					clinic_id:that.clinic_id
					},
					res => {
						this.$common.loadToHide();
						console.log(res)
						if (res.code == 1) {
							var pageClinicLists = res.data;
							var number=res.data.length; 
							page++;
							uni.stopPullDownRefresh();
							if (number == 0) {
								reachbottom = true
								uni.showToast({
									"title": "已经加载全部",
									icon: "none",
									duration: 1000
								});
							} else {
								that.myCouponLists = that.myCouponLists.concat(pageClinicLists);
							}
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					}
				)
			},
		}
	}
</script> 

<style>
	@import url('../../common/common.css');
	page{background: #f8f8f8;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.appointment{padding: 0 30upx;}
	.appointment_item{background: #fff; border-radius: 10px; margin-top: 30upx;}
	.appointment_title{justify-content: space-between; padding: 20upx 30upx; border-bottom: 1px solid #f8f8f8;}
	.left_title{color: #999; font-size: 24upx;}
	.right_title{color: #999; font-size: 24upx;}
	.right_title text{display: inline-block; margin-right: 10upx;}
	.right_title text.yi{border: 2upx solid #1a67b8; width: 10upx; height: 10upx; border-radius: 10upx;}
	.right_title text.dai{background: #1a67b8; width: 14upx; height: 14upx; border-radius: 14upx;}
	.appointment_content{padding: 40upx 30upx; position: relative;}
	.edit_btn{position: absolute; width: 150upx; height: 42upx; right: 30upx; bottom: 40upx;}
	.edit_btn button{display: block; width: 150upx; height: 42upx; line-height: 42upx; font-size: 26upx; color: #fff; background: #1a67b8; border-color: #1a67b8; border-radius: 42upx; margin: 0; padding: 0;}
	.content_title{color: #333; font-size: 36upx; font-weight: bolder;}
	.content_message{margin-top: 20upx;}
	.content_message image{width: 24upx; height: 24upx;}
	.content_message text{color: #666; font-size: 24upx; margin-left: 20upx;}
	.submit_btn button{width: 540upx; height: 72upx; border-radius: 72upx; background: #2562a1; color: #fff; font-size: 36upx;}
	
	.common_block{background: #fff; border-radius: 10px; margin-bottom: 20upx;}
	.nonebg{background: none !important;}
	.noResult{background: #fff; padding: 30upx; font-size: 30upx; color: #999; text-align: center; border-radius: 5px;}
</style>
